<template>
  <h3>刷新点列表</h3>
  <!-- 下拉框 -->
  <el-select v-model="value" placeholder="刷新点选择" style="width: 240px">
    <el-option-group
      v-for="group in options"
      :key="group.label"
      :label="group.label"
    >
      <el-option
        v-for="item in group.options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-option-group>
  </el-select>

  <!-- 卡片 -->
  <el-card style="padding: 0">
    <div class="list">点的生成规则</div>
    <div class="content">
      <div class="distance">
        点的平均距离：
        <el-input
          v-model="distance"
          style="width: 240px"
          placeholder="请输入点的平均距离"
        />
      </div>
      <div class="type">
        点的类型：
        <el-input
          v-model="type"
          style="width: 240px"
          placeholder="请输入点的类型"
        />
      </div>
      <div class="interval">
        重刷间隔：
        <el-input
          v-model="interval"
          style="width: 240px"
          placeholder="请输入重刷间隔"
        />
      </div>
      <div class="radius">
        重刷半径：
        <el-input
          v-model="radius"
          style="width: 240px"
          placeholder="请输入重刷半径"
        />
      </div>
    </div>
  </el-card>
  <h3 style="margin-bottom: 10px">点的具体设置</h3>
  <el-card>
    <el-tabs v-model="activeName" type="card" class="demo-tabs">
      <el-tab-pane label="宠物" name="first"
        ><p style="margin-bottom: 7px">提示文案</p>
        <el-input
          v-model="textarea"
          style="width: 240px"
          :rows="2"
          type="textarea"
          placeholder="Please input"
        /><br />
        <p style="display: inline; margin-bottom: 7px; margin-top: 7px">
          宠物列表
        </p>
        <el-button type="success" link style="float: right">添加宠物</el-button>
        <!-- 宠物名称列表 -->
        <el-table :data="tableData" style="width: 100%; margin-bottom: 20px">
          <el-table-column
            prop="name"
            label="宠物名称"
            width="100px"
            align="left"
          />
          <el-table-column
            prop="time"
            label="出现时段"
            width="300px"
            align="center"
          />
          <el-table-column
            prop="scale"
            label="刷出比例"
            width="300px"
            align="center"
          />

          <el-table-column
            prop="controls"
            label="操作"
            width="300px"
            align="center"
            ><template #default="{}">
              <el-button type="danger" link>删除</el-button></template
            >
          </el-table-column>
        </el-table></el-tab-pane
      >
    </el-tabs>
  </el-card>
</template>
<style scoped>
.el-select {
  margin-top: 30px;
  margin-bottom: 30px;
}
.el-card {
  margin-bottom: 30px;
}

.list {
  font-family: "web-font";
  font-size: 20px;
  background-color: #f4f5f9;
  margin-bottom: 30px;
}
.content {
  font-size: 14px;
}
.distance {
  margin-bottom: 20px;
}
.type {
  margin-bottom: 20px;
}
.interval {
  margin-bottom: 20px;
}
.radius {
  margin-bottom: 20px;
}
</style>
<script setup>
import { ref } from "vue";

const value = ref("");
const options = [
  {
    label: "刷新点选择",
    options: [
      {
        value: "Zhang",
        label: "张家湾商圈",
      },
      {
        value: "Wang",
        label: "王家湾商圈",
      },
    ],
  },
];
// 点的生成规则对应的数据模型
const distance = ref("");
const type = ref("");
const interval = ref("");
const radius = ref("");

const activeName = ref("first");

// 提示区文案内容
const textarea = ref("这里有一只跳跳鼠嗷，快来抓住它吧");

//宠物列表数据模型
const tableData = [
  {
    name: "跳跳鼠",
    time: "2024-9-27",
    scale: 1,
  },
  {
    name: "大劲鹏",
    time: "2024-9-27",
    scale: 1,
  },
  {
    name: "金凤王",
    time: "2024-9-27",
    scale: 1,
  },
];
</script>
